<template>
    <view>
        <Header returnIcon="black" :background="background" fontColor="black" :title="title" />
        <view class="content" :style="{'min-height': `${noBarHeight}px`}">
            <view class="header">
                <view class="status">{{ userInfo.level || '' }}</view>
                <view class="title">招选云，精准招商信息工具</view>
                <view class="end_time">
                    有效期:{{userInfo.reg_time || ''}}（至{{ userInfo.last_time || ''}}）
                </view>
            </view>
            <view class="tips">会员权益</view>
            <view class="list">
                <view class="img_black">
                    <img src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/messageCenter_icon.png" />
                </view>
                <view class="list_content">
                    <view class="list_title">信息内容</view>
                    <view class="list_text size_omit">
                        {{userInfo.accredit_content.map(res => { return res.cat_name })}}
                    </view>
                </view>
            </view>
            <view class="list">
                <view class="img_black">
                    <img src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/address_icon.png" />
                </view>
                <view class="list_content">
                    <view class="list_title">项目区域</view>
                    <view class="list_text">{{ userInfo.accredit_city }}</view>
                </view>
            </view>
            <view class="list">
                <view class="img_black">
                    <img src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/type_icon.png" />
                </view>
                <view class="list_content">
                    <view class="list_title">行业范围</view>
                    <view class="list_text">{{ userInfo.accredit_industry }}</view>
                </view>
            </view>
            <view class="list">
                <view class="img_black">
                    <img src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/project_icon.png" />
                </view>
                <view class="list_content">
                    <view class="list_title">{{ userInfo.level != '体验会员' ? '项目数量不限' : '项目数量≤30个' }}</view>
                    <view class="list_text">已推送：{{ userInfo.imptcountnomessage || 0 }}个</view>
                </view>
            </view>
            <view class="list">
                <view class="img_black">
                    <img src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/api_icon.png" />
                </view>
                <view class="list_content">
                    <view class="list_title">{{ userInfo.level != '体验会员' ? '线下对接' : '线下对接≤5个' }}</view>
                    <view class="list_text">已对接：{{ userInfo.message_count || 0 }}个</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import Header from "@/components/Header.vue";
import {userInfo} from "@/utils/api/user";
var app = getApp()
export default ({
    name: "collect",
    data() {
        return {
            userInfo: {},
            background: 'white',
            title: '会员权限',
            noBarHeight: app.globalData.noBarHeight
        }
    },
    components: {
        Header
    },
    created() {
        const params = {
            uid: uni.getStorageSync('uid')
        }
        userInfo(params).then(res => {
            this.userInfo = res.data
        })
    }
})
</script>

<style scoped lang="scss">
.content {
    flex-direction: column;
    width: 100%;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    padding: 20rpx;
    box-sizing: border-box;
    .header {
        width: 100%;
        height: 256rpx;
        background: linear-gradient(0, #5162FD, #8E4EF7);
        border-radius: 20rpx;
        backdrop-filter: blur(40px);
        box-sizing: border-box;
        color: white;
        padding: 30rpx 30rpx 43rpx 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .status {
            height: 78rpx;
            width: 100%;
            font-size: 56rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 78rpx;
        }
        .title {
            height: 40rpx;
            width: 100%;
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 40rpx;
        }
        .end_time {
            margin-top: 6rpx;
            height: 28rpx;
            width: 100%;
            text-align: right;
            font-size: 20rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 28rpx;
        }
    }
    .tips {
        width: 100%;
        height: 132rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: bold;
        color: #5162FD;
        line-height: 45rpx;
    }
    .tips::before {
        content: '';
        width: 92rpx;
        height: 1rpx;
        background: #5162FD;
        margin:  20rpx;
    }
    .tips::after {
        content: '';
        width: 92rpx;
        height: 1rpx;
        background: #5162FD;
        margin:  20rpx;
    }
    .list{
        width: 710rpx;
        height: 126rpx;
        border-radius: 12rpx;
        margin: 12rpx 0;
        position: relative;
        background: white;
        display: flex;
        align-items: center;
        .img_black {
            width: 126rpx;
            height: 126rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .img_black img {
            width: 44rpx;
            height: 44rpx;
        }
        .list_content {
            width: 80%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            .list_title {
                height: 45rpx;
                font-size: 32rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: bold;
                color: #494949;
                line-height: 45rpx;
                margin-bottom: 10rpx;
            }
            .list_text {
                width: 100%;
                height: 33rpx;
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #9B9B9B;
                line-height: 33rpx;
            }
        }
    }
}
</style>
